<template>
  <div>
    <h1>state</h1>
    aaa:{{this.$store.state.count}}
    <div>
      显示students数据{{$store.state.students}}
    </div>
    <div>
     {{getLen}}
    </div>
    <h1>mutations</h1>
    <div>
      {{students.length}}-{{count}}
    </div>
    <button @click="fnadd">添加学生</button>
    <button @click="addStu({'name':'zhaoliu','age':60})">添加学生2</button>
    <h1>getters</h1>
    <div>
      getters访问：
      {{$store.getters.cstudents}}
    </div>
    <div>
      {{cstudents}}
    </div>
    <div>
      {{fmtCount}}
    </div>
    <div>
      <button @click="fn()">触发actions</button>
    </div>
  </div>
</template>


<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
      //  students:this.$store.state.students
    }
  },
  computed:{
     ...mapState(["students","count"]),
     ...mapGetters(["cstudents","fmtCount"]),
     getLen(){
       return this.$store.state.students.length;
     }
  },
  methods:{
    ...mapMutations(["addStu"]),
    ...mapActions(["changeStu"]),
    fnadd(){
      this.$store.commit("addStu",{name:'wangwu',age:33})
      // this.addStu({name:'wangwu',age:33})
    },
    fn(){
      // this.$store.dispatch("changeStu","参数")
      this.changeStu("参数")
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>
